﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@section BeforeScripts{

}
@section Scripts{
    <script type="text/javascript">
        var dg = $('#dlg');
        var dlg = $('#dlog');
        InItDatagrid("/Account/GetSysAccounts", "用户列表");

        function InItDatagrid(url, title) {
            var setRoleobj = null;
            dg.datagrid({
                url: url,
                headers: headers,
                title: title,
                columns: [[
                    { field: 'Id', title: '主键', width: 100 },
                    { field: 'NickName', title: '昵称', width: 100 },
                    { field: 'EnglishAccount', title: '英文账号', width: 100 },
                    { field: 'Password', title: '密码', width: 100 },
                ]],
                fit: true, //页面自适应,
                width: 'auto',
                height: 'auto',
                showFooter: true,
                striped: true, //设置为 true，则把行条纹化。（即奇偶行使用不同背景色）
                cache: false,
                rownumbers: true,//设置为 true，则显示带有行号的列
                singleSelect: true,// 设置为 true，则只允许选中一行。
                checkOnSelect: true, //如果设置为 true，当用户点击某一行时，则会选中/ 取消选中复选框checkbox
                loadMsg: "正在加载数据中...",
                pagination: true,//分页控件
                modal: true,
                pageSize: 5,
                pageList: [5, 10, 20],
                toolbar: '#tb',
                enableEditing: true,
                onLoadSuccess: function (data) {
                }
            });
            //当分页时运行
            dg.datagrid("getPager").pagination({
                beforePageText: '第',//页数文本框前显示的汉字
                afterPageText: '页    共 {pages} 页',
                displayMsg: '第{from}到{to}条，共{total}条',
            });
        };


        var edit = true;
        //修改数据事件
        $("#edit").bind('click', function () {
            edit = true;
            var row = dg.datagrid('getSelected');
            if (!row) {
                $.messager.alert("提示消息", "请选择要修改的数据");
                return;
            }
            var opts = dlg.dialog('options');
            $('#ID').textbox('setValue', row.Id);
            $('#NickName').textbox('setValue', row.NickName);
            $('#EnglishAccount').textbox('setValue', row.EnglishAccount);
            $('#Password').textbox('setValue', row.Password);
            dlg.dialog('open').window('center');
        });
        //添加数据事件
        $("#add").bind('click', function () {
            edit = false;
            var title = dlg.dialog();
            var row = dg.datagrid('getSelected');
            $(".from_prizeInfo .easyui-textbox").textbox("clear");
            $(".from_prizeInfo select").combobox("clear");
            dlg.dialog('open').window('center');
        });
        //删除数据事件
        $("#remove").bind('click', function () {
            var row = dg.datagrid("getSelected");
            if (!row) {
                $.messager.alert("提示消息", "请选择要修改的数据");
                return;
            }
            var obj = { "Id": row.Id };
            var row = dg.datagrid('getSelected');
            $.ajax({
                type: "Post",
                url: "/Account/DelAccount",
                data: obj,
                headers: headers,
                async: false,
                success: function (res) {
                    dialogSuccess(res);
                }
            });
        });
        //刷新
        $("#refresh").bind('click', function () {
            dg.datagrid("reload");
        });
        //查询
        $("#search").click(function () {
            var data = $(".form_elem").serializeArray();
            var obj = {};
            $.each(data, function () {
                obj[this.name] = this.value;
            });
            dg.datagrid("reload", obj);
        });
        //清理
        $("#clear").click(function () {
            $(".form_elem .easyui-textbox").textbox("clear");
            $(".form_elem select").combobox("clear");
            var obj = {};
            dg.datagrid("reload", obj);
        });

        dlg.dialog({
            title: '角色管理',
            width: 400,
            height: 460,
            closed: true,
            cache: false,
            iconCls: 'icon-save',
            modal: true,
            buttons: [{
                text: '提交',
                iconCls: 'icon-ok',
                handler: function () {
                    var url = "";
                    if (edit) {
                        url = "/Account/EditAccount";
                    } else {
                        url = "/Account/AddAccount";
                    };
                    var data = $(".from_prizeInfo").serializeArray();
                    var obj = {};
                    $.each(data, function () {
                        obj[this.name] = this.value;
                    });
                    $.ajax({
                        type: "Post",
                        url: url,
                        headers: headers,
                        data: obj,
                        async: false,
                        success: function (res) {
                            dialogSuccess(res);
                        }
                    });
                }
            }, {
                text: '取消',
                handler: function () {
                    dlg.dialog('close');
                }
            }]
        });
        //dialog请求结果处理
        function dialogSuccess(data) {
            if (data.ResultType == 1) {
                easyAlert('执行成功');
                dlg.dialog('close');
                dg.datagrid("reload");
            } else {
                easyAlert(res.msg);
            }
        }
    </script>
}



<table id="dlg"></table>

<div id="tb" style="padding:5px;height:auto">
    <div style="margin-bottom:5px">
        <a id="refresh" href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh">刷新</a>
        <a id="add" href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">新增</a>
        <a id="edit" href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true">编辑</a>
        <a id="remove" href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>
    <div>
        <form class="form_elem">
            用户昵称: <input name="NickName" class="easyui-textbox" style="width: 200px; padding-right: 60px">
            用户账号: <input name="EnglishAccount" class="easyui-textbox" style="width: 200px; padding-right: 60px">
            <button type="button" id="search" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</button>
            <button type="button" id="clear" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">清空</button>
        </form>
    </div>
</div>


@* 操作弹窗 *@
<div id="dlog" class="easyui-dialog" title="Basic Dialog">
    <form class="from_prizeInfo">
        <div style="display:none">
            <input type="text" name="ID" id="ID" class="easyui-textbox" style="width:150px;" />
        </div>
        <div>
            用户昵称：
            <input id="NickName" name="NickName" class="easyui-textbox" style="width: 200px; padding-right: 60px">
        </div>
        <div>
            用户账号：
            <input id="EnglishAccount" name="EnglishAccount" class="easyui-textbox" style="width: 200px; padding-right: 60px">
        </div>
        <div>
            用户密码：
            <input id="Password" name="Password" class="easyui-textbox" style="width: 200px; padding-right: 60px">
        </div>
    </form>
</div>